<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="90px" style="margin-bottom: 16px;">
      <el-form-item label="小区名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入小区名称" clearable />
      </el-form-item>
      <!-- <el-form-item label="全称" prop="fullName">
        <el-input v-model="queryParams.fullName" placeholder="请输入全称" clearable />
      </el-form-item>
      <el-form-item label="简介" prop="introduction">
        <el-input v-model="queryParams.introduction" placeholder="请输入简介" clearable />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <!-- <el-button type="primary" icon="Plus" @click="drawerVisible = true">新增</el-button> -->
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
                v-hasPermi="['pms:community:add']"
              
            >新增</el-button>
         </el-col>
          <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleEdit()"
               v-hasPermi="['pms:community:edit']"
            >修改</el-button>
         </el-col>
           <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['pms:community:remove']"
            >删除</el-button>
         </el-col>
        
    </el-row>
    <el-table :data="communityList" v-loading="loading" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="小区名称" prop="name" min-width="120" />
      <el-table-column label="全称" prop="fullName" min-width="180" />
      <el-table-column label="简介" prop="introduction" min-width="200" />
      <el-table-column label="地址" prop="address" min-width="180" />
      <el-table-column label="经度" prop="longitude" min-width="100" />
      <el-table-column label="纬度" prop="latitude" min-width="100" />
      <!-- <el-table-column label="是否信托式" prop="trust" min-width="100" /> -->
      <el-table-column label="支付方式" prop="payway" min-width="100" />
      <el-table-column label="电话" prop="phone" min-width="120" />
      <el-table-column label="封面图" prop="img" min-width="120" >
        <template #default="scope">
          
          <el-image  v-if="scope.row.img" :src=" scope.row.img" style="width: 100px;height: 100px;" />
         <div v-else>暂无封面图</div>
        </template>
      </el-table-column>
      <el-table-column label="建筑面积(万方)" prop="buildingArea" min-width="120" />
      <el-table-column label="业委会" prop="industryCommittee" min-width="120" />
      <el-table-column label="物业公司" prop="propertyCompany" min-width="120" />
      <el-table-column label="物业服务时间" min-width="220">
        <template #default="scope">
          <span v-if="scope.row.propertyStart && scope.row.propertyEnd">{{ scope.row.propertyStart }} 至 {{ scope.row.propertyEnd }}</span>
        </template>
      </el-table-column>
      <el-table-column label="绿化率(%)" prop="greeningRate" min-width="100" />
      <el-table-column label="电梯数量" prop="elevatorNum" min-width="100" />
      <el-table-column label="楼栋数量" prop="buildingNum" min-width="100" />
      <el-table-column label="小区户数" prop="householdNum" min-width="100" />
      <el-table-column label="单元数" prop="unitNum" min-width="100" />
      <el-table-column label="交付时间" prop="deliverTime" min-width="120" />
      <el-table-column label="物业费" prop="propertyFee" min-width="100" />
      <!-- <el-table-column label="证明材料必须" prop="needConfim" min-width="120" /> -->
      <el-table-column label="车位收费" prop="parkingFee" min-width="100" />
      <el-table-column label="广告收费" prop="advertisingFee" min-width="100" />
      <el-table-column label="租赁摊位收费" prop="stallFee" min-width="120" />
      <el-table-column label="活动场所" prop="activityPlace" min-width="100" />
      <el-table-column label="小区物业银行卡所属银行" prop="bankName" min-width="170" />
      <el-table-column label="小区银行卡" prop="bankCard" min-width="140" />
      <el-table-column label="资金展示来源" prop="mpSource" min-width="120" />
      <el-table-column label="操作" fixed="right" width="200" align="center">
        <template #default="scope">
        
          <el-button link
           type="primary" icon="Edit" @click="handleEdit(scope.row)"
            v-hasPermi="['pms:community:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete"
           @click="handleDelete(scope.row)" v-hasPermi="['pms:community:remove']">删除</el-button>
        
          <!-- <el-button   link type="primary" size="small" @click="handleEdit(scope.row)" v-hasPermi="['pms:community:edit']">编辑</el-button>
             <el-button link type="danger" size="small" @click="handleDelete(scope.row)" v-hasPermi="['pms:community:remove']">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 小区表单组件 -->
    <CommunityForm
      :visible="drawerVisible"
      :is-edit="isEdit"
      :form-data="currentFormData"
      :area-options="areaOptions"
      @update:visible="drawerVisible = $event"
      @success="getList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { listCommunity, delCommunity, getAreas } from '@/api/house/community'
import CommunityForm from './components/CommunityForm.vue'
const { proxy } = getCurrentInstance()
const loading = ref(false)
const communityList = ref([])
const total = ref(0)
const drawerVisible = ref(false)
const areaOptions = ref([])
const currentFormData = ref({})

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: '',
    fullName: '',
    introduction: ''
  }
})
const { queryParams } = toRefs(data)
const isEdit = ref(false)
const ids = ref([])
const single = ref(true)
const multiple = ref(false)

onMounted(() => {
  getList()
  getAreaList()
})

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.communityId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

function getList() {
  loading.value = true
  // isCommunity=false
  listCommunity({...queryParams.value,isCommunity:false}).then(res => {
    console.log(res)
    // 假设res.data.rows为数据，res.data.total为总数
    communityList.value = res?.rows || []
    total.value = res?.total || 0
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

/** 获取地区列表 */
function getAreaList() {
  getAreas().then(res => {
    areaOptions.value = res?.rows || []
  })
}

/** 处理地区选择变化 */
function handleAreaChange(value) {
  if (value && value.length >= 3) {
    drawerForm.provinceCode = value[0]
    drawerForm.cityCode = value[1]
    drawerForm.areaCode = value[2]
  } else {
    drawerForm.provinceCode = ''
    drawerForm.cityCode = ''
    drawerForm.areaCode = ''
  }
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  queryParams.value.name = ''
  queryParams.value.fullName = ''
  queryParams.value.introduction = ''
  handleQuery()
}

function handleAdd() {
  currentFormData.value = {}
  isEdit.value = false
  drawerVisible.value = true
}

function handleEdit(row) {
  if(!row){
    let id=ids.value[0]
    row=communityList.value.find(item => item.communityId == id)
  }
  isEdit.value = true
  currentFormData.value = { ...row }
  drawerVisible.value = true
}



function handleDelete(row) {

 const communityIds = row.communityId || ids.value
  proxy.$modal.confirm('是否确认删除小区编号为"' + communityIds + '"的数据项?').then(function () {
    return delCommunity(communityIds)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}



</script>
